<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <div id="box">

    </div>

</body>
<script>


    /*
    1. 自己明确this的指向的时候，可以考虑箭头函数
    2. 一般在回调函数中使用箭头函数
    */

    /* 数组的一个api可以
        foreach
        map 
        filter
        ....
    */

    const arr = [1, 2, 3, 4, 5];

    arr.forEach(function (item, index) {
        console.log(item, index);
    })

    /* es6 使用箭头函数 */

    arr.forEach((item, index) => {
        console.log('箭头函数在forEach使用', item, index);
    })

    /* map */
    console.log('数组map');

    const arr1 = arr.map(function (item, index) {
        return item * item;
    });

    console.log(arr1);

    /* es6 */

    const arr2 = arr.map((item) => {
        return item * item * item;
    })

    console.log(arr2);



    const arr3 = arr.map(item => item * item * item)

    console.log(arr3);


    /* filter */
    /* 过滤arr偶数 */
    const arr4 = arr.filter(item => item % 2 == 0)

    console.log('过滤arr偶数', arr4);


    /* 字面量对象的方法尽可能不要使用this，除非自己很清楚this的指向 */

    const obj = {
        id: 1,
        name: '张三',
        age: 18,
        say: () => {
            /* say 里面的 this 是谁？ */
            console.log('say', this);
            /* window 全局对象天生自带一个 name属性 */
            console.log(`我的id是${this.id}，我的名字是${this.name}，我的年龄是${this.age}`);
        }
    }
    console.log(obj.id);
    console.log(obj.name);

    obj.say();








</script>

</html>